<template>
  <!-- 评价模板管理 -->
  <baseslot :show-search-box="false">
    <template v-slot:btn-box>
      <ActionBar
        :page-no="92"
        :add-active="addActive"
        :del-active="delActive"
        :edit-active="editActive"
        :cancel-active="cancelActive"
        :save-active="saveActive"
        @add="add"
        @cancel="cancel"
        @edit="edit"
        @del="del"
        @save="save"
      />
    </template>
    <template v-slot:table-box>
      <div class="nowpage-select-but-sty">
        <selectbutton :buttonselectlist="buttonselectlist" @nowselectbuttonindex="nowselectbuttonindex" />
      </div>
      <!-- <div class="nowpage-bar-sty">
        <topnewbar :nowbarcontent="nowbarcontent" />
      </div> -->
      <div v-if="true" class="nowpage-main-box">
        <el-table
          ref="tableData"
          :data="tableList"
          class="table_content"
          height="calc(100% - 100px)"
          border
          :row-class-name="tableRowClassName"
          :span-method="objectSpanMethod"
          :header-cell-style="headerColor"
          style="width:100%"
          @row-click="handleEdit"
        >
          <el-table-column
            label="指标名称"
            width="200"
            prop="evaluationIndexName"
            :show-overflow-tooltip="true"
            align="center"
          >
            <!-- //产业这里使用了插槽是为了加背景色（由于合并表格以后表格斑马纹颜色会发生错乱，只能加个div覆盖错乱的颜色，不需要可去掉） -->
            <template slot-scope="scope">
              <div
                style="width:180px !important"
                :style="
                  'height:' +
                    scope.row.evaluationIndexNamecount * 40 +
                    'px;line-height:' +
                    scope.row.evaluationIndexNamecount * 40 +
                    'px'
                "
                :class="
                  scope.row.evaluationIndexNamenumber % 2 === 0
                    ? 'blue text_ellipsis'
                    : 'white text_ellipsis'
                "
              >
                {{ scope.row.evaluationIndexName }}
              </div>
            </template>
          </el-table-column>

          <el-table-column
            prop="evaluationContent"
            label="评分内容"
            :show-overflow-tooltip="true"
          >
            <!-- //评分标准同指标使用插槽原因一样 -->
            <template slot-scope="scope">
              <div
                :style="
                  'height:' +
                    scope.row.evaluationContentIdcount * 40 +
                    'px;'
                "
                :class="
                  scope.row.evaluationContentIdnumber % 2 === 0
                    ? 'white text_ellipsis'
                    : 'blue text_ellipsis'
                "
              >
                {{ scope.row.evaluationContent }}
              </div>
            </template>
          </el-table-column>
          <el-table-column
            :show-overflow-tooltip="true"
            prop="technical"
            align="center"
            label="评价标准"
          />
          <el-table-column
            prop="deduction"
            width="140"
            align="center"
            :show-overflow-tooltip="true"
            label="评价分数"
          >
            <template slot-scope="scope">
              <div style="width:120px !important">
                {{ scope.row.deduction }}分/项
              </div>
            </template>
          </el-table-column>
        </el-table>
        <Pagination
          :page-size="pageSize"
          :current-page="currentPage"
          :total-size="totalSize"
          @changePageSize="changePageSize"
          @changeCurrentPage="changeCurrentPage"
        />
      </div>
    </template>
    <template v-slot:dialog>
      <el-dialog
        title="评价模板添加"
        :visible.sync="isshowaddview"
        width="40%"
      >
        <div class="input-line">
          <div class="input-line-lab">指标名称:</div>
          <el-select v-model="addlist.evaluationIndexId" filterable clearable class="input-line-input">
            <el-option v-for="(evaluationIndexitem,evaluationIndexindex) in evaluationIndexList" :key="evaluationIndexindex" :value="evaluationIndexitem.evaluationIndexId" :label="evaluationIndexitem.evaluationIndexName" />
          </el-select>
        </div>
        <div class="input-line">
          <div class="input-line-lab">评价内容:</div>
          <el-input v-model="addlist.evaluationContent" class="input-line-input" />
        </div>
        <div class="input-line">
          <div class="input-line-lab">内容总分:</div>
          <el-input v-model="addlist.evaluationScore" class="input-line-input" />
        </div>
        <div v-for="(additem,addindex) in addlist.evaluationTechnicalList" :key="addindex" class="input-line">
          <div class="input-two-line">
            <div class="input-line-lab">评价标准:</div>
            <el-input v-model="addlist.evaluationTechnicalList[addindex].technical" class="input-line-input" />
          </div>
          <div class="input-two-line">
            <div class="input-line-lab">评分扣项:</div>
            <el-input v-model="addlist.evaluationTechnicalList[addindex].deduction" class="input-line-input" />
          </div>
        </div>
        <!-- <div class="input-line">
          <div class="input-two-line">
            <div class="input-line-lab">评价标准:</div>
            <el-input v-model="addlist.deduction" class="input-line-input" />
          </div>
          <div class="input-two-line">
            <div class="input-line-lab">评分扣项:</div>
            <el-input v-model="addlist.desc" class="input-line-input" />
          </div>
        </div> -->
        <span slot="footer" class="dialog-footer">
          <el-button class="zh-button-one" @click="addlineone()">添加评分标准</el-button>
          <el-button class="zh-button-one" @click="dellineone()">删除评分标准</el-button>
          <el-button class="zh-button-one" @click="isshowaddview = false">取 消</el-button>
          <el-button class="zh-button-two" @click="isshowaddview = false">确 定</el-button>
        </span>
      </el-dialog>
      <el-dialog
        title="评价模板修改"
        :visible.sync="isshoweditview"
        width="40%"
      >
        <div class="input-line">
          <div class="input-line-lab">指标名称:</div>
          <el-select v-model="editlist.evaluationIndexId" filterable clearable class="input-line-input">
            <el-option v-for="(evaluationIndexitem,evaluationIndexindex) in evaluationIndexList" :key="evaluationIndexindex" :value="evaluationIndexitem.evaluationIndexId" :label="evaluationIndexitem.evaluationIndexName" />
          </el-select>
        </div>
        <div class="input-line">
          <div class="input-line-lab">评价内容:</div>
          <el-input v-model="editlist.evaluationContent" class="input-line-input" />
        </div>
        <div class="input-line">
          <div class="input-line-lab">内容总分:</div>
          <el-input v-model="editlist.evaluationScore" class="input-line-input" />
        </div>
        <div class="input-line">
          <div class="input-two-line">
            <div class="input-line-lab">评价标准:</div>
            <el-input v-model="editlist.technical" class="input-line-input" />
          </div>
          <div class="input-two-line">
            <div class="input-line-lab">评分扣项:</div>
            <el-input v-model="editlist.deduction" class="input-line-input" />
          </div>
        </div>
        <!-- <div class="input-line">
          <div class="input-two-line">
            <div class="input-line-lab">评价标准:</div>
            <el-input v-model="addlist.deduction" class="input-line-input" />
          </div>
          <div class="input-two-line">
            <div class="input-line-lab">评分扣项:</div>
            <el-input v-model="addlist.desc" class="input-line-input" />
          </div>
        </div> -->
        <span slot="footer" class="dialog-footer">
          <el-button class="zh-button-one" @click="isshoweditview = false">取 消</el-button>
          <el-button class="zh-button-two" @click="isshoweditview = false">确 定</el-button>
        </span>
      </el-dialog>
    </template>
  </baseslot>
</template>
<script>
import topbarreq from "@/api/trace-source-web/agr-safety-evaluation/evaluation-indicator/index"
import nowpagereq from "@/api/trace-source-web/agr-safety-evaluation/evaluation-temple-manage/index"
// import topnewbar from "../components/topnewbar.vue"
import baseslot from "@/components/BaseMainSlot/newBaseMainSlot.vue"
import Pagination from "@/components/Pagination";
import selectbutton from "@/components/selectbutton/index.vue"
import ActionBar from "@/components/ActionBar";
import { mymixin } from "@/utils/mixin"
export default {
  name: "EvaluationTempleManage",
  components: { baseslot, Pagination, selectbutton, ActionBar },
  mixins: [mymixin],
  data() {
    return {
      nowbuttonselectindex: 0,
      isshowaddview: false,
      isshoweditview: false,
      addlist: {
        evaluationContent: '',
        evaluationIndexId: '',
        evaluationScore: '',
        evaluationTechnicalList: [
          {
            "deduction": -3,
            "technical": "每缺填1项"
          },
          {
            "deduction": -3,
            "technical": "每缺填1项"
          }
        ]
      },
      editlist: {
        "deduction": '',
        "evaluationContent": '',
        "evaluationContentId": '',
        "evaluationIndexId": '',
        "evaluationScore": '',
        "evaluationTechnicalId": '',
        "technical": ''
      },
      // 最上层信息
      topbarlist: [],
      buttonselectlist: [
        { name: "基本信息评价" },
        { name: "行业指标评价" }],
      evaluationIndexList: [],
      nowbarcontent: 895,
      tableList: [],
      selectid: "", // 当前表格选中的评价标准id
      tabledata: [
        // {
        //   "evaluationIndexName": "主体信息", // 指标名称
        //   "evaluationContentId": "1", // 主要用于评分内容归类
        //   "evaluationContent": "基本信息应有:主体名称、统一社会信用代码(主体个人身份证)、生产地址（或注册地址）、主体类别、法人代表（生产者）、联系方式、地理坐标、种养类型、种养总规模（10分）",
        //   "technical": "主体名称", // 评价标准
        //   "deduction": "-2分/项", // 评价分数
        //   "curIncreased": "不符合", // 实际结果
        //   "curBal": "8" // 实际评分
        // },
        // {
        //   "evaluationIndexName": "主体信息",
        //   "evaluationContentId": "1", // 主要用于评分内容归类
        //   "evaluationContent": "每缺填一项-3分", // 评分内容
        //   "technical": "统一社会信用代码", // 评价标准
        //   "deduction": "-1分/项",
        //   "curIncreased": "符合",
        //   "curBal": "18"
        // },
        // {
        //   "evaluationIndexName": "主体信息", // 指标名称
        //   "evaluationContentId": "2", // 主要用于评分内容归类
        //   "evaluationContent": "产品信息应有:产品种类、产品种养规模（15分）", // 评分内容
        //   "technical": "产品种类", // 评价标准
        //   "deduction": "-3分/项",
        //   "curIncreased": "符合",
        //   "curBal": "15"
        // },
        // {
        //   "evaluationIndexName": "主体信息", // 指标名称
        //   "evaluationContentId": "3", // 主要用于评分内容归类
        //   "evaluationContent": "产品种养规模信息不齐全（10分）", // 评分内容
        //   "technical": "产品规模", // 评价标准
        //   "deduction": "-4分/项", // 评价分数
        //   "curIncreased": "不符合", // 实际结果
        //   "curBal": "6" // 实际评分
        // }
      ]
    }
  },
  watch: {
    nowChanceStau(newvalue) {
      if (newvalue === 'add') {
        this.isshowaddview = true
        this.getevaluatlist()
        // this.addlist.evaluationIndexName = ""
        // this.addlist.evaluationIndexScore = ""
        // this.addlist.remark = ""
      } else if (newvalue === 'edit') {
        this.isshoweditview = true
        this.getevaluatlist()
        // this.isshoweditview = true
      }
    },
    nowbuttonselectindex(newvalueone) {
      this.getTableDataList()
    }
  },
  created() {
    // this.getTableDataList()
    this.gettopbarbuttonmessage()
  },
  methods: {
    // 获取表格数据
    async getTableDataList() {
      // this.tableList = this.listHandle(this.tabledata)
      // let params = {
      //   page: this.currentPage,
      //   size: this.pageSize,
      //   evaluationIndexId: this.topbarlist[this.nowbuttonselectindex].evaluationIndexId
      // }
      let id = this.topbarlist[this.nowbuttonselectindex].evaluationIndexId
      let resone = await nowpagereq.getlist(id)
      let listone = resone.data
      console.log(listone.totalElements)
      this.totalSize = resone.totalElements
      this.tableList = this.listHandle(listone)
    },
    // 表格选中方法
    handleEdit(e) {
      // console.log(e)
      // 删除相关
      this.selectid = e.evaluationContentId
      this.delActive = true
      // 修改相关
      this.editlist = {
        "deduction": e.deduction,
        "evaluationContent": e.evaluationContent,
        "evaluationContentId": e.evaluationContentId,
        "evaluationIndexId": e.evaluationIndexId,
        "evaluationScore": e.evaluationScore,
        "evaluationTechnicalId": e.evaluationTechnicalId,
        "technical": e.technical
      }
      this.editActive = true
      // console.log(this.editlist)
      // 获取选中的评价内容id,亮起删除和修改
    },
    // 获取按钮选择数据
    gettopbarbuttonmessage() {
      topbarreq.querybyconditlist().then(
        res => {
          this.topbarlist = res.data
          this.buttonselectlist = []
          this.topbarlist.forEach(
            (item, index) => {
              this.buttonselectlist.push({ name: item.evaluationIndexName })
            }
          )
          this.getTableDataList()
        }
      )
    },
    // 添加一条评分标准
    addlineone() {
      this.addlist.evaluationTechnicalList.push(
        {
          "deduction": -3,
          "technical": ""
        }
      )
    },
    // 删除一条评分标准
    dellineone() {
      this.addlist.evaluationTechnicalList.pop()
    },
    // 删除一条评分标准
    // 获取可选择指标信息
    getevaluatlist() {
      let params = this.topbarlist[this.nowbuttonselectindex].evaluationIndexId
      topbarreq.querybyconditlist(params).then(
        res => {
          this.evaluationIndexList = res.data
        }
      )
    },
    // 按钮当前选择index
    nowselectbuttonindex(i) {
      this.nowbuttonselectindex = i
    },
    // 选择页面size
    changePageSize(pageSize) {
      this.pageSize = pageSize;
      this.getTableDataList();
    },
    // 选择页面page
    changeCurrentPage(currentPage) {
      this.currentPage = currentPage;
      this.getTableDataList();
    },
    // 删除时触发方法
    delmessage() {
      nowpagereq.dellist(this.selectid).then(
        res => {
          if (res.code === 1) {
            this.selectid = ""
            this.$message.success("删除成功！")
            this.resetActionBar()
            this.getTableDataList()
          } else {
            this.$message.warning("删除失败！")
          }
        }
      )
    },
    async save() {
      if (this.nowChanceStau === 'add') {
        nowpagereq.addlist(this.addlist).then(
          res => {
            if (res.code === 1) {
              this.$message.success("添加成功！")
              this.resetActionBar()
              this.getTableDataList()
            } else {
              // console.log(res)
              this.$message.warning("添加失败！")
            }
          }
        ).catch((err) => {
          this.$message.warning("添加失败！")
          console.log(err)
        })
      }
      if (this.nowChanceStau === 'edit') {
        nowpagereq.editlist(this.editlist).then(
          res => {
            if (res.code === 1) {
              this.$message.success("修改成功！")
              this.resetActionBar()
              this.getTableDataList()
            } else {
              this.$message.warning("修改失败！")
            }
          }
        ).catch((err) => {
          this.$message.warning("修改失败！")
          console.log(err)
        })
      }
    },
    // -----单元合并处理相关-------
    // 合并单元格（此方法需要结合this.$listHandle(res.data.dat.list)处理过的数据）
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      // 找到第一列
      if (columnIndex === 0) {
        // evaluationIndexNamecount是需要合并的字段（这里第一列合并的字段是evaluationIndexNamecount，evaluationIndexNamecount是经过this.$listHandle处理过的数据，是主体信息的合并的个数）
        // 如果合并的个数大于1的话
        if (row.evaluationIndexNamecount > 1) {
          return {
            rowspan: row.evaluationIndexNamecount,
            colspan: 1
          };
        } else if (row.evaluationIndexNamecount === 1) {
          return {
            rowspan: 1,
            colspan: 1
          };
        } else {
          return {
            rowspan: 0,
            colspan: 0
          };
        }
      }
      // 第二列与第一列同理
      //   if (columnIndex === 1) {
      //     if (row.evaluationContentcount > 1) {
      //       return {
      //         rowspan: row.evaluationContentcount,
      //         colspan: 1
      //       };
      //     } else if (row.evaluationContentcount === 1) {
      //       return {
      //         rowspan: 1,
      //         colspan: 1
      //       };
      //     } else {
      //       return {
      //         rowspan: 0,
      //         colspan: 0
      //       };
      //     }
      //   }
      if (columnIndex === 1) {
        if (row.evaluationContentIdcount > 1) {
          return {
            rowspan: row.evaluationContentIdcount,
            colspan: 1
          };
        } else if (row.evaluationContentIdcount === 1) {
          return {
            rowspan: 1,
            colspan: 1
          };
        } else {
          return {
            rowspan: 0,
            colspan: 0
          };
        }
      }
      // 第六列与第一列同理
      // if (columnIndex === 5) {
      //   if (row.evaluationContentIdcount > 1) {
      //     return {
      //       rowspan: row.evaluationContentIdcount,
      //       colspan: 1
      //     };
      //   } else if (row.evaluationContentIdcount === 1) {
      //     return {
      //       rowspan: 1,
      //       colspan: 1
      //     };
      //   } else {
      //     return {
      //       rowspan: 0,
      //       colspan: 0
      //     };
      //   }
      // }
    },
    // 表格头部颜色
    headerColor({ rowIndex, columnIndex }) {
      return this.headerColormetod(rowIndex);
    },
    // 改变合计那一行的背景色
    tableRowClassName({ row, rowIndex }) {
      if (row.technical === "合计") {
        return "hang";
      }
      return this.tableRowClassNamemethodes(rowIndex);
    },
    // 转化下请求回来的数据
    listHandle(list) {
      for (var key in list[0]) {
        var k = 0;
        var j = 0;
        while (k < list.length) {
          list[k][key + "count"] = 1;
          list[k][key + 'number'] = j;
          for (var i = k + 1; i <= list.length - 1; i++) {
            if (list[k][key] === list[i][key] && list[k][key] !== "") {
              list[k][key + "count"]++;
              list[i][key + "count"] = 0;
              list[i][key + 'number'] = j;
            } else {
              break;
            }
          }
          j++
          k = i;
        }
      }
      return list;
    },
    headerColormetod(rowIndex) {
      if (rowIndex === 0) {
        return { background: "#006e91", color: "#fff" };
      } else {
        return { background: "#bd1a1a", color: "#fff" };
        // return { color: "#fff" };
      }
    },
    // 斑马条纹（bg和bgnone为类名，可以在类名写样式）
    tableRowClassNamemethodes(rowIndex) {
      if (rowIndex % 2 === 0) {
        return "bg";
      } else {
        return "bgnone";
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.nowpage-select-but-sty{
  width: 98%;
  margin-left: 1%;
  height: 40px;
  // background-color: chartreuse;
  display: flex;
  align-items: center;
  position: relative;
  z-index: 6;
  margin-bottom: 40px;
}
.nowpage-bar-sty{
   width:100%;
   height: 50px;
   position: relative;
   z-index: 6;
   padding-left: 10px;
}
.nowpage-main-box{
  width:100%;
  height:calc(100% - 50px);
  position: relative;
  z-index: 5;
  top: -55px;
  padding-top: 50px;
  padding-left: 1%;
  padding-right: 1%;
  border: #0ec497 1px dashed;
  // background-color: #00485a;
}
</style>
<style scoped lang="scss">
// 单元格样式
::v-deep .el-table__body{
  height:auto !important;
}
.text_ellipsis{
    white-space: pre-wrap;
    width: 80px;
    display: flex;
    flex-wrap: wrap;
    overflow: auto;
    text-align: center;
    justify-content: center;
    align-items: center;
}
::v-deep .el-table .hang {
  background: #970b84;
  font-weight: bold;
//   color:#bd1a1a;
}
.blue {
//   background: #0cc415;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding: 0 10px;
  text-align: center;
}
.white {
//   background: #bd1a1a;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding: 0 10px;
  text-align: center;
}
// 表格hover及选中样式
::v-deep .el-table tr:hover,
::v-deep .el-table--enable-row-hover .el-table__body tr:hover > td,
::v-deep
  .el-table--striped
  .el-table__body
  tr.el-table__row--striped.current-row
  td,
::v-deep .el-table__body tr.current-row > td {
  background-color: #15a0ca00 !important;
}
</style>
